<template>
  <div>
    <!-- 展示所有评估记录 -->
    <div class="div01">
      <el-button @click="addAppLog" >新建评估</el-button>
    </div>
    <div class="table1" v-if="goodsAppLogInfo!=[]">
      <el-table :data="goodsAppLogInfo" border :row-class-name="tableRowClassName" ref="multipleTable">
        <!-- 表格中多选框组件 -->
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="officialPrice" label="官方价" width="140">
        </el-table-column>
        <el-table-column prop="valuationPrice" label="评估价" width="140">
        </el-table-column>
        <el-table-column prop="createBy" label="评估人" width="120">
        </el-table-column>
        <el-table-column prop="createTime" label="评估时间" width="120">
        </el-table-column>
        <el-table-column prop="appraiseDesc" label="备注" width="120">
        </el-table-column>
        <el-table-column prop="appraiseStat" label="是否为历史评估" :formatter="statusFormat" width="120">
        </el-table-column>
      </el-table>
    </div>
    <div class="block" v-if="goodsAppLogInfo!=[]">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="goodsAppLogInfoPage.current" :page-sizes="[1,2,3]" :page-size="goodsAppLogInfoPage.size"
        layout="total, sizes, prev, pager, next, jumper" :total="goodsAppLogInfoPage.total">
      </el-pagination>
    </div>
    <!-- 新增 -->
    <el-dialog title="新建评估" :visible.sync="dialogVisible1" width="50%" :before-close="handleClose">

      <el-form :model="saceAppLogForm" :rules="rules" ref="saceAppLogForm" label-width="100px">
        <el-form-item label="官方价" prop="officialPrice" style="width: 350px;">
          <el-input v-model="saceAppLogForm.officialPrice"></el-input>
        </el-form-item>
        <el-form-item label="评估价" prop="valuationPrice" style="width: 350px;">
          <el-input v-model="saceAppLogForm.valuationPrice"></el-input>
        </el-form-item>
        <el-form-item label="典当价" prop="pawnPrice" style="width: 350px;">
          <el-input v-model="saceAppLogForm.pawnPrice"></el-input>
        </el-form-item>
        <el-form-item label="收购价" prop="rchasePrice" style="width: 350px;">
          <el-input v-model="saceAppLogForm.rchasePrice"></el-input>
        </el-form-item>
        <el-form-item label="售卖价" prop="sellingPrice" style="width: 350px;">
          <el-input v-model="saceAppLogForm.sellingPrice"></el-input>
        </el-form-item>
        <el-form-item label="租价元/天" prop="rentalPrice" style="width: 350px;">
          <el-input v-model="saceAppLogForm.rentalPrice"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="appraiseDesc">
          <el-input type="textarea" v-model="saceAppLogForm.appraiseDesc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('saceAppLogForm')">提交</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name:"appraiseLog",
    props:["selectGoodsId"],
    data(){
      return{
        goodsAppLogInfoPage:{},
        goodsAppLogInfo:[],
        dialogVisible1:false,
        saceAppLogForm:{
          accountId:"",
          goodsId:"",
          officialPrice:"",
          valuationPrice:"",
          pawnPrice:"",
          rchasePrice:"",
          sellingPrice:"",
          rentalPrice:"",
          appraiseDesc:"",
          createBy:""
        },
        rules: {
          officialPrice: [
            {
            　　pattern: /^[0-9]+\.[0-9]{2}$/,
            　　message: "小数点后保留两位",
            　　trigger: "blur"
            },
            {
              required: true,
              message: '请输入官方价',
              trigger: 'blur'
            }
          ],
          valuationPrice:[
            {
            　　pattern: /^[0-9]+\.[0-9]{2}$/,
            　　message: "小数点后保留两位",
            　　trigger: "blur"
            },
            {
            required: true,
            message: '请输入评估价',
            trigger: 'blur'
          }],
          pawnPrice:[
            {
            　　pattern: /^[0-9]+\.[0-9]{2}$/,
            　　message: "小数点后保留两位",
            　　trigger: "blur"
            },
            {
            required: true,
            message: '请输入典当价',
            trigger: 'blur'
          }],
          rchasePrice:[
            {
            　　pattern: /^[0-9]+\.[0-9]{2}$/,
            　　message: "小数点后保留两位",
            　　trigger: "blur"
            },
            {
            required: true,
            message: '请输入收购价',
            trigger: 'blur'
          }],
          sellingPrice:[
            {
            　　pattern: /^[0-9]+\.[0-9]{2}$/,
            　　message: "小数点后保留两位",
            　　trigger: "blur"
            },
            {
            required: true,
            message: '请输入售卖价',
            trigger: 'blur'
          }],
          rentalPrice:[
            {
            　　pattern: /^[0-9]+\.[0-9]{2}$/,
            　　message: "小数点后保留两位",
            　　trigger: "blur"
            },
            {
            required: true,
            message: '请输入租价',
            trigger: 'blur'
          }],
          appraiseDesc:[
            {
            required: true,
            message: '请输入备注信息',
            trigger: 'blur'
          }]
        }
      }
    },
    methods:{
      statusFormat(row,column){
        if(row.appraiseStat == 1){
          return "否";
        }else{
          return "是";
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //不为空发送新增请求
            this.saceAppLogForm.goodsId = this.selectGoodsId;
            this.$http.post("pawnGoodsAppraiseLog/saveGoodsAppraiseLog",this.saceAppLogForm).then(resp=>{
              alert(resp.data.message);
              location.reload();
            })
          } else {
            return false;
          }
        });
      },
      addAppLog(){
        this.dialogVisible1 = true;
      },
      handleClose(done) {
        location.reload();
      },
      qx(){
        this.dialogVisible1 = false;
        location.reload();
      },
      handleCurrentChange(current) {
        this.getAllAppLog(current, this.goodsAppLogInfoPage.size);
      },
      handleSizeChange(size) {
        this.getAllAppLog(this.goodsAppLogInfoPage.current, size);
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.appraiseStat == 1) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
        return '';
      },
      getAllAppLog(currentPage, pagesize){
        this.$http.get("pawnGoodsAppraiseLog/getGoodsAppraiseLogByGoodsId",{params: {goodsId:this.selectGoodsId,current: currentPage,size: pagesize}}).then(resp=>{
          this.goodsAppLogInfoPage = resp.data.data;
          this.goodsAppLogInfo = resp.data.data.records;
        })
      },
      getAccountId(){
        let user = JSON.parse(localStorage.getItem("loginAccount"));
        this.saceAppLogForm.accountId = user.accountId;
      }
    },
    created() {
      this.getAllAppLog(1,2);
      this.getAccountId();
    }
  }
</script>

<style>
  .div01{
    position: absolute;
    top:50px;
    left: 0px;
  }
  .el-table .warning-row {
    background: yellow;
  }
</style>
